<template>
	<view>
		<view class="guar-wrap" v-show="showFlag" style="padding: 10px;">
			<view class="guar-back-w u-border-top u-p-40 u-p-r-30 u-p-l-30 u-font-40"
				style="font-weight: 700;display: flex; align-items: center;">
				<i></i>
				<image style="width: 46rpx;height: 46rpx;margin-right: 20rpx;" src="../../static/image/report2.png"
					mode=""></image>
				<view>{{name}}-{{address}}</view>
			</view>
			<view class="u-border-top u-p-20 u-p-r-30 u-p-l-30 ">
				<view class="u-font-32" style="display: flex;" required>
					<text style="color: red">*</text>报修类型：
					<view style="margin-left: auto;display: flex;">
						<view @click="handleSelect" style="display: contents;color: #2b85e4;" v-if="activeName==null">
							选择报修类型</view>
						<view @click="handleSelect" style="display: contents;color: #2b85e4;" v-else>{{activeName}}
						</view>
						<view>
							<image :src="typeStatus == true ? downImg:flatImg" :style="typeStatus == true ?'width: 15px;height:15px;margin-top: -1px;margin-left: 2px;': 
									'						 width: 8px;height:8px;margin-top: 2px;margin-left: 9px;'" alt="">
						</view>
					</view>
				</view>
				<view v-if="typeStatus" class="u-m-t-34 u-flex u-flex-wrap">
					<view v-for="(item,index) in classList" :key='index' style="margin:5px 10px;" class="guar-class-box"
						:class="activeNum==index?'guar-class-box-active':''" @click="activeEvent(index,item.id);">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="guar-back-f"></view>
			<view @click="timeChag" class="u-p-30 u-font-32" style="display:flex;justify-content:space-between;">
				<view class="">
					<text style="color: red">*</text>预约维修时间：
				</view>
				<view class="">
					<view v-show="point">
						<span style="color: #999;">立即上门</span>
						<image :src="flatImg" style="width: 8px;height:8px;margin-top: 2px;margin-left: 9px" alt=""></image>
					</view>
					<view>
						{{guarTime?guarTime.join(' '):''}}
					</view>
				</view>
			</view>
			<view class="guar-back-f"></view>
			<view class="u-p-20 u-p-l-30 u-p-r-30">
				<view class="u-m-b-20 u-font-32">
					<text style="color: red">*</text>报修说明：
				</view>
				<view class='guar-text' style="border: 1px solid #c4c4c4;border-radius: 10rpx;">
					<textarea maxlength='-1' v-model="guaranList.repairs_info" type="textarea"
						placeholder="为了提供更好的服务，请详细描述报修情况!" />
				</view>

			</view>
			<view class="u-p-20 u-p-l-30 u-p-r-30">
				<view class="u-m-b-20 u-font-32" style="display: flex;">
					<view @click="uoloadHouse" v-if="guaranList.repairs_picture.length<3"
						style="color: blue;display: flex; align-items: center;">
						<image style="width: 20px;height: 18px;margin-right: 3px;margin-top: 1px;"
							src="../../static/image/upload_images.png" mode=""></image>
						<view>点击上传要维修的图片</view>
					</view>
				</view>

				<view class="guarn-box guarn-box2 u-m-t-20" v-if="guaranList.repairs_picture.length!=0">
					<view class="guarn-box2-img" v-for="(item,index) in guaranList.repairs_picture" :key='index'>
						<image mode="aspectFill" style="border-radius: 5px;" :src="item"></image>
						<u-icon @click="colseImg(index)" name="close" color="red" size="40"
							class="guarn-box2-img-close"></u-icon>
					</view>
					<!-- <view class="guarn-box " v-if="guaranList.repairs_picture.length<3">
						<view @click="uoloadHouse" class="guarn-box-img">
							<image class="u-m-t-72" src="../../static/image/camera.svg" mode=""></image>
						</view>
					</view> -->
				</view>
				<view class="guarn-box-txt u-m-t-20">
					<view class="u-font-24 u-m-b-10">
						提示：请上传清晰的照片,以便解决报修问题,最多上传3张照片
					</view>
				</view>
			</view>

		</view>
		<view class="u-font-26 u-p-t-60 u-p-b-30 u-p-l-50" style="width: 100%;display: flex;">
			<u-checkbox active-color="#43AF00" shape="circle" v-model="radio">报修申请需要同意</u-checkbox>
			<view @click="toMent" style="color: rgb(65, 117, 5);line-height: 35px;">《维修协议》</view>
			<view class="post_text" @click="skip1">
				<view>公区报修</view>
			</view>
		</view>
		<view>
			<lb-picker :list='list' confirm-color='#2C6E00' :level='2' mode='multiSelector' :props="myProps"
				v-model="guarTime" ref="addRef"></lb-picker>
		</view>
		<!--  -->
		<view class="bill-deta-btn" @click="guaranBtn">
			<button class="yilingqu">提交报修申请</button>
			<!-- :disabled="!guaranList.maintain_type||false||!guaranList.repairs_info" -->
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				value: '',
				activeNum: -1,
				activeName: null,
				show: false,
				myProps: {
					label: 'name',
					value: 'name',
					children: 'child'
				},
				list: [],
				guarTime: [],
				showFlag: false,
				homelist: null,
				name: null,
				address: null,
				classList: [],
				guaranList: {
					mobile: null,
					maintain_type: null,
					room_id: null,
					repairs_appointment_time: null,
					repairs_info: null,
					repairs_picture: [],
					pro_id: null,
					typeStatus:'',
				},
				imgFlag: true,
				typeStatus: false, //保修类型展示状态
				point: true,
				flatImg: require('../../static/image/right.png'),
				downImg: require('../../static/image/down.png'),
				radio: false
			}
		},
		watch: {
			guarTime(val) {
				this.guaranList.repairs_appointment_time = val.join(' ')
				this.point = false
			}
		},
		onShow() {
			// this.getPayList()
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						uni.showModal({
							title: '请先进行业主认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/address/address'
									})
								}
							}
						});
						this.$openInvite()
					} else {
						_this.guaranList.mobile = uni.getStorageSync('phone')
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						_this.guaranList.room_id = _this.homelist.roomId
						_this.guaranList.pro_id = _this.homelist.proId

						_this.getRepaireClass()
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/pages/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							console.log('a')
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
		},
		methods: {
			//
			handleSelect() {
				var flag = this.typeStatus
				this.classList.forEach(row => {
					this.typeStatus = false
				})
				this.typeStatus = flag ? false : true;
				console.log("this.typeStatus", this.typeStatus);
			},
			// 获取报修类型
			getRepaireClass() {
				this.$request.api.repaireClass({}).then(res => {
					if (res.data.status == 200) {
						this.classList = res.data.data
						console.log(this.classList)
					}
				});
			},
			// 选择时间
			timeChag() {
				this.$refs.addRef.show();
				this.list = [{}, {}, {}, {}, {}, {}, {}]
				let hours = new Date().getHours()
				let time = new Date().getTime()

				if (hours > 17) {
					for (let i = 1; i < 8; i++) {
						let newTime = new Date(time + i * 86400000)
						this.$set(this.list[i - 1], 'child', [{
							name: '9:00~12:00',
							child: []
						}, {
							name: '13:00~18:00',
							child: []
						}, {
							name: '18:00~22:00',
							child: []
						}])
						this.$set(this.list[i - 1], 'name', newTime.getFullYear() + '-' + (newTime.getMonth() + 1) + '-' +
							newTime.getDate())
					}
				} else {
					for (let i = 0; i < 7; i++) {
						let newTime = new Date(time + i * 86400000)
						if (hours > 12 && hours < 18 && i == 0) {
							this.$set(this.list[i], 'child', [{
								name: '13:00~18:00',
								child: []
							}, {
								name: '18:00~22:00',
								child: []
							}])

						} else if (hours > 18 && hours < 22 && i == 0) {

							this.$set(this.list[i], 'child', [{
								name: '18:00~22:00',
								child: []
							}])
						} else if (hours < 12 || i > 0) {
							this.$set(this.list[i], 'child', [{
								name: '9:00~12:00',
								child: []
							}, {
								name: '13:00~18:00',
								child: []
							}, {
								name: '18:00~22:00',
								child: []
							}])
						}
						this.$set(this.list[i], 'name', newTime.getFullYear() + '-' + (newTime.getMonth() + 1) + '-' +
							newTime.getDate())
					}
				}

			},
			activeEvent(val, val2) {
				this.activeNum = val;
				this.activeName = this.classList[val].name
				console.log(this.activeName, 'this.activeName')
				this.typeStatus = false;
				this.guaranList.maintain_type = val2;
			},
			skip1() {

				uni.redirectTo({
					url: "/pages/clap/resLIst?type=公区报修"
				});
				console.log('页面跳转1')
			},
			guaranBtn() {
				this.guaranList.user_id = uni.getStorageSync('rawData').userId
				this.guaranList.uuid = uni.getStorageSync('uuid')
				this.guaranList.org_id = uni.getStorageSync('projectItem').orgId

				if (!this.activeName) {
					uni.showToast({
						title: '请填写报修类型',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				if (!this.guaranList.repairs_info) {
					uni.showToast({
						title: '请填写报修说明',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				// if (this.guaranList.repairs_picture.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传需维修图片',
				// 		duration: 2000,
				// 		icon: 'error'
				// 	});
				// 	return
				// }
				if (!this.radio == 1) {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '请同意协议!',
					// 	showCancel: false,
					// 	success: function(res) {

					// 	}
					// });
					uni.showToast({
						title: '请同意协议',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				// #ifdef H5
				this.guaranList.typeStatus=1
				// #endif
				// #ifdef APP-PLUS
				this.guaranList.typeStatus=1
				// #endif
				// #ifdef MP-WEIXIN
				this.guaranList.typeStatus=2
				// #endif
				this.$request.api.addRepair(this.guaranList).then(res => {
					if (res.data.status == 200) {
						this.guaranList = {
							mobile: null,
							maintain_type: null,
							room_id: null,
							repairs_appointment_time: null,
							repairs_info: null,
							repairs_picture: [],
							pro_id: null,
						}
						this.guarTime = [];
						this.activeNum = null;
						uni.showModal({
							title: '提示',
							content: '提交成功,是否跳转报修列表!',
							success: function(res) {
								uni.navigateBack({
									url: '/pages/repairList/repairList'
								})
							}
						});
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
							duration: 3000,
						})
					}
				});

			},
			colseImg(val) {
				this.guaranList.repairs_picture.splice(val, 1)
				if (this.guaranList.repairs_picture.length == 0) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse() {

				console.log('+++++++++++++')
				let that = this
				let images = [];
				uni.chooseImage({
					count: 3, //默认9
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						images = res.tempFilePaths || []
						if (images.length > 0) {
							for (let i = 0; i < images.length; i++) {
								pathToBase64(images[i]).then(res => {
									uni.request({
										url: 'https://admin.515f.com/api/weixin/applet/base64_to_image_url',
										method: 'POST',
										data: {
											imageBase64: res
										},
										success: res2 => {
											that.guaranList.repairs_picture.push(res2.data
												.data);
											// that.uploadNum += 1;
											uni.hideLoading();
										}
									})

								})
							}
						}
					}
				})
			},
			//跳转协议
			toMent() {
				plus.runtime.openURL('https://s.515f.com/#/pages/model/details?id=FB202302097643011')
			},
		}
	}
</script>

<style lang="scss">
	.guar-class-box {
		// width: 196rpx;
		height: 68rpx;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		border: 2rpx solid #ccc;
		color: #999;
		padding-left: 10px;
		padding-right: 10px;

		&:nth-child(3n) {
			margin-right: 0 !important;
		}

	}

	.post_text {
		// padding: 0 10px;
		// position: fixed;
		// top: 440px;
		// right: 0;
		flex: 1;
		margin-left: 80rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 100rpx 0px 0px 100rpx;
		line-height: 66rpx;
		text-align: center;
		font-weight: 500;
		color: #ffffff;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		font-size: 15px;
		font-weight: 600;
		width: 200rpx;
		max-height: 130upx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.guar-class-box-active {
		border-color: #FEEED6;
		background: #FEEED6;
		color: #F9A832;
	}

	.guar-back-f {
		width: 92%;
		border: 0.5px solid #f4f4f4;
		margin: auto;
	}

	.guar-text textarea {
		width: 100%;
		height: 80px;
		// background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}

	.guarn-box {
		width: 100%;
		height: 216rpx;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.guarn-box-txt {
		// width: 418rpx;
		// height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.custom-style {
		color: #F9AF3A;
	}

	.bill-deta-btn {
		width: 100%;
		padding-bottom: 20px;

		.pay {
			background: #ff9900 !important;
			color: #fff;
		}

		.yilingqu {
			width: 80%;
			height: 84rpx;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			line-height: 84rpx;
			color: white;
			text-align: center;
			font-size: 32rpx;
		}

		.guar-back-w i {
			width: 6px;
			height: 16px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-top: -3px;
		}
	}

	.uni-textarea-placeholder {
		color: #999;
		overflow: hidden;
		font-size: 12px;
	}
</style>